<template>
	<view class="menu padding-lr bg-white">
		<u-popup v-model="popShow" mode="top">
			<view class="padding-lr">
				<view class="cell" v-for="i in company" :key="i.company_id" @click="toggleCompany(i.company_id)">
					<view class="flex-row align-center text-cut">
						<image class="icon" :src="i.company.picture" mode="heightFix"></image>
						<view class="name">{{i.company.company_name}}</view>
					</view>
				</view>
				<view class="cell create" @click="createCompany">
					创建企业
				</view>
        <view class="cell create" @click="manageCompany">
        	企业成员
        </view>
			</view>
		</u-popup>
		
		<view class="top">
			<view class="title cell" @click="popShow = !popShow" v-if="currentCompany">
				<view class="flex-row align-center">
					<image class="icon" :src="currentCompany.company.picture" mode="heightFix"></image>
					<view class="name text-cut">{{currentCompany.company.company_name}}</view>
					<u-icon name="arrow-down-fill" size="24" color="#333" style="margin-top: 8rpx;margin-left: 8rpx;"></u-icon>
				</view>

				<button class="toggle-btn enterprise" @click="toggle">个人版</button>
			</view>
			
			<view class="title cell" @click="popShow = !popShow" v-if="!company.length">
				<view class="name text-cut">还没有加入企业</view>
				<button class="toggle-btn enterprise" @click="toggle">个人版</button>
			</view>
		</view>

		<u-grid :col="3" :border="false">
			<u-grid-item v-for="i in menu" :key="i.id" @click="gotoUrl(i)">
				<image :src="i.icon"></image>
				<view class="grid-text">{{i.text}}</view>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	export default {
		props: {
			company: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				popShow: false,
				current: 0,
				menu: [{
						id: 1,
						icon: '/static/images/card1.png',
						text: '企业动态',
						url: '/pages/enterprise/activity'
					},
					{
						id: 2,
						icon: '/static/images/card2.png',
						text: '客户名片',
						url: '/pages/enterprise/customer'
					},
					// {
					// 	id: 3,
					// 	icon: '/static/images/card3.png',
					// 	text: '企业成员',
					// 	url: ''
					// },
					{
						id: 4,
						icon: '/static/images/card4.png',
						text: '邀请成员',
						url: '/pages/enterprise/invitation'
					}
				],
			};
		},
		computed: {
			currentCompany() {
				return this.company.find(item => item.company_id == this.current) || this.company[0]
			}
		},
    watch: {
      company() {
        this.setCurrent()
      }
    },
		mounted() {
      this.setCurrent()
		},
		methods: {
      setCurrent() {
        let dft = this.company.find(item => item.default)
        if (dft) {
          this.current = dft.company_id
        } else if (this.company.length) {
          this.current = this.company[0].company_id
        } else {
          this.current = 0
        }
      },
			toggle() {
				this.$emit('toggle', 0)
			},
			toggleCompany(id) {
				this.current = id
				this.popShow = false
				this.setDefault()
			},
			gotoInvitation() {
				if (!this.current) {
					this.$msg('你还没有加入一个企业')
					return
				}
				this.$goto(`/pages/enterprise/invitation?id=${this.current}&type=send`)
			},
			gotoUrl(i) {
				if (!this.current) {
					this.$msg('你还没有加入一个企业')
					return
				}
				if (i.url) {
					this.$goto(i.url + `?id=${this.current}&type=send`)
				} else {
					this.$goto('')
				}
			},
			createCompany() {
				if (this.$store.state.userinfo.level < 3) {
					this.$msg('非企业会员无法创建')
					return
				}
        this.popShow = false
				this.$goto('/pages/enterprise/edit')
			},
      manageCompany() {
        if (!this.current) {
          this.$msg('无效操作')
          return
        }
        if (!this.company.length) {
          this.$msg('无效操作')
          return
        }
        this.popShow = false
        this.$goto('/pages/enterprise/manager?id=' + this.current)
      },
			async setDefault() {
				let res = await this.$u.get('/company/choose?id=' + this.current)
			}
		}
	}
</script>

<style lang="scss">
	.menu {
		image {
			width: 76rpx;
			height: 76rpx;
			object-fit: cover;
		}

		.grid-text {
			margin-top: 8rpx;
		}
	}

	.top {
		overflow: hidden;
	}

	.cell {
		width: 100%;
		height: 90rpx;
		background: #fff;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
		font-size: 30rpx;
		letter-spacing: 1px;
		color: #333333;

		&.title {
			font-size: 32rpx;
			color: #000;
			justify-content: space-between;
			// border-bottom: none;

			.name {
				max-width: 400rpx;
			}
		}

		&.create {
			color: gray;
			font-size: 24rpx;
			padding-left: 24rpx;
		}

		.icon {
			width: 40rpx;
			height: 40rpx;
			margin: 0 8rpx;
			display: block;
			border-radius: 8rpx;
		}
	}
</style>
